<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 循环普通数组  kye作用 提高虚拟dmo加载  -->
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}} - {{index}}</li>
        </ul>
        <!-- 循环数字 item从1开始  index从0开始 -->
        <div>
            <button v-for="(item ,index) in num" :key="index">{{item}}--{{index}}</button>
        </div>
        <!-- 循环字符串 -->
        <p>
            <span v-for="(item,index) in str" :key="index">{{item}} -- {{index}}</span>
        </p>
        <!-- 循环对象 第一个字符是 值  第二个字符是键-->
        <ul>
            <li v-for="(item,index) in obj">{{item}} = {{index}}</li>
        </ul>



        <!-- 循环嵌套List -->
        <table style="text-align: center;">
            <tr>
                <th>我从小</th>
                <th>喝到大</th>
            </tr>
            <tr v-for="(item,index) in List" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </table>



        <!-- 循环children（后代）数组 -->
        <ul>
            <li v-for="(item,index) in nav" :key="index">
                <span>{{item.title}}</span>
                <ul>
                    <li v-for="(item1,index) in item.children" :key="index">{{item1.title}}</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    Vue.config.productionTip = false//网址 logo 不存在 
    new Vue({
        el: "#app",
        data() {
            return {
                arr: [1, 2, 3, 4, 5, 6, 7],
                num: 7,
                str: "千束：泷奈老婆贴贴",
                obj: {
                    name: "千束",
                    age: '16'
                },
                List: [
                    { "id": 1, "name": "千束" },
                    { "id": 2, "name": "泷奈" },
                    { "id": 3, "name": "拉姆" },
                    { "id": 4, "name": "蕾姆" },
                ],
                nav: [
                    {
                        "id": 1, "title": "pc",
                        "children":[
                            {"id":11,"title":"华硕"},
                            {"id":12,"title":"小米"},
                            {"id":13,"title":"戴尔"},
                            {"id":14,"title":"联想"},
                        ]
                    },
                    {
                        "id": 2, "title": "mobao",
                        "children":[
                            {"id":21,"title":"oppo"},
                            {"id":22,"title":"vivo"},
                            {"id":23,"title":"锤子"},
                            {"id":24,"title":"华为"},
                        ]
                    }
                ]
            }
        }
    })
</script>

</html>